<template>
  <div class="article-list">
    <a-table ref="table" :columns="columns" @change="handleTableChange" :scroll="{ y: 600 }" :pagination="pagination" :loading="loading" :data-source="dataList" :rowKey="(text, record,index) => record">
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handleDel(record)">删除</a>
        </template>
      </span>
    </a-table>
  </div>
</template>
<script lang="ts">
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import "mavon-editor/dist/highlightjs/styles/vs2015.min.css";
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import * as qiniu from "qiniu-js";
import config from "../../../utils/config";
@Component({
  head() {
    return {
      title: "登录",
      titleTemplate: "%s - by 刘洋博客",
    };
  },
})
export default class extends Vue {
  form: Object = { cMdContent: "", cHtmlContent: "" };
  value: string = "";
  $axios: any;
  $message: any;
  loading: boolean = false;
  dataList: Array<any> = [];
  columns: Array<any> = [
    {
      title: "标题",
      dataIndex: "ctitle",
      key: "ctitle",
    },
    {
      title: "简介",
      dataIndex: "cPreface",
      key: "cPreface",
    },
    {
      title: "类型",
      dataIndex: "type",
      customRender: (text: any, record: any) => record.type?.typename,
      key: "type",
    },
    {
      title: "创建时间",
      dataIndex: "createdAt",
      key: "createdAt",
    },
    {
      title: "图片",
      key: "cimg",
      dataIndex: "cimg",
    },
    {
      title: "操作",
      key: "action",
      width: "160px",
      scopedSlots: { customRender: "action" },
    },
  ];
  pagination: any = {
    current: <number>1,
    pageSize: <number>10,
    total: <number>0,
  };
  $router: any;

  created() {
    this.pagination = {
      current: 1,
    };
    this.loadData();
  }
  async handleDel(row: { cid: any }) {
    const res = await this.$axios.$post(
      config.BASE_URL + "/api/article/delById",
      {
        cid: row.cid,
      }
    );
    if (res.c == 1) {
      this.$message.success(res.m);
      this.loadData();
    } else {
      this.$message.error(res.m);
    }
  }
  handleTableChange(pagination: { current: any }, filters: any, sorter: any) {
    this.pagination = {
      current: pagination.current,
    };
    this.loadData();
  }
  async loadData() {
    // console.log(this.pagination);
    const res = await this.$axios.$get(
      config.BASE_URL + "/api/article/list?page=" + this.pagination.current
    );
    if (res.c == 1) {
      this.dataList = res.d.rows;
      const pagination = { ...this.pagination, total: res.d.count };
      this.loading = false;
      this.pagination = pagination;
    } else {
      this.$message.error(res.m);
    }
  }
  handleEdit(row: { cid: string }) {
    this.$router.push("/admin/add?id=" + row.cid);
  }
}
</script>

<style scoped>
/* .div-main{margin-top: 80px;} */
</style>
